Estoy tratando de filtrar un div, y está dando style="sidplay:none" a todos los elementos que no están en el resultado de búsqueda y funciona bien, ¡pero el atributo no oculta el elemento!
Imagen aquí (imagen directa no disponible para mí)
mi código
WikiOption.Elements.searchInput.on("input", (thisx)=> { var val = $(thisx.target).val(); $(".toc-wrap h3").each(function () { $(this).toggle($(this).text().toLowerCase().includes(val)); }); });.toggle() no es el método correcto para usar en su caso. Si se dispara el siguiente evento de entrada y un <h3> vuelve a coincidir, entonces volvería a cambiar a su estado anterior. Use sentencias if/else y .show() y .hide() .
Además, el evento de input no se activa si retrocede y deja <input> vacío, por lo que se agrega un controlador de eventos keyup .
$('.search').on('input', function(e) { const txt = $(e.target).val().toLowerCase(); $('.toc-wrap h3').each(function() { if ($(this).text().toLowerCase().includes(txt)) { $(this).show(); } else { $(this).hide(); } }); }); $('.search').on('keyup', function(e) { if (e.keyCode === 8 && $(this).val() === '') { $('.toc-wrap h3').hide(); } }); h3 { display: none } <input class='search' type='search'> <article class='toc-wrap'> <h3>ABCDEFGHIJ</h3> <h3>klmnopqrst</h3> <h3>uvwxyz</h3> <h3>aAbBcC</h3> </article> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>